import {Loading, Message, MessageBox} from 'element-ui'
import Pedometer from "../commons/pedometer";

/**
 * 成功弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const succeed=(txt, timeout = 3000)=>  {
    Message({
        message: txt || '操作成功！',
        type: 'success',
        showClose: true,
        duration: timeout
    });
}

/**
 * 消息弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const msg = (txt, timeout) => {
    return Layers.info(txt, timeout);
}

/**
 * 消息弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const info = (txt, timeout = 3000) => {
    Message({
        message: txt,
        type: 'info',
        showClose: true,
        duration: timeout
    });
}

/**
 * 警告弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const warn = (txt, timeout = 3000)=>  {
    Message({
        message: txt,
        type: 'warning',
        showClose: true,
        duration: timeout
    });
}

/**
 * 错误弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const error = (txt, timeout = 5000)=>  {
    Message({
        message: txt || '操作失败！',
        type: 'error',
        showClose: true,
        duration: timeout
    });
}

/**
 * 失败弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const failed = (txt, timeout = 5000) => {
    Layers.error(txt, timeout);
}

/**
 * 加载条
 *
 * @param txt       文本
 * @returns {*}
 */
const loading = (txt = 'Loading...')=> {
    return Loading.service({
        text: txt,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    })
};


/**
 * 全局单一滚动条
 *
 * 一些 ajax 请求，需要展开一个遮罩层，避免用户操作到正在处理的数据，
 * 如果有多个 ajax，会产生重复打开加载条的问题；
 * 这个加载条解决了这个问题。
 */
const pedometer = new Pedometer();


/**
 * 全局加载条，可以重复调用，打开几次，就要关闭几次
 *
 * @returns void
 */
const startLoading= () =>{
    Layers.pedometer.run();
};

/**
 * 全局加载条
 *
 * @returns void
 */
const closeLoading = () => {
    Layers.pedometer.close();
};

/**
 * 消息弹窗
 *
 * @param title {string}        标题
 * @param html {string}         一般用上面几种弹窗即可，这个弹窗允许包含html脚本，需要注意避免XSS攻击
 * @returns {Promise<*>}
 */
const alert = (title, html) => {
    return MessageBox.alert(html, title);
};

/**
 * 消息弹窗
 *
 * @param title {string}        标题
 * @param html {string}         一般用上面几种弹窗即可，这个弹窗允许包含html脚本，需要注意避免XSS攻击
 * @returns {Promise<*>}
 */
const alertHtml = (title, html) => {
    return MessageBox.alert(html, title, {dangerouslyUseHTMLString: true});
};


/**
 * 消息弹窗
 *
 * @param title {string}        标题
 * @param msg {string}          小标题
 * @returns {Promise<*>}
 */
const prompt = (title, msg) => {
    return MessageBox.prompt(msg, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    });
};

/**
 * 确认弹窗
 *
 * @param txt {string}      文本
 * @returns {Promise<*>}
 */
const confirm = (txt) => {
    return MessageBox.confirm(txt, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'confirm'
    });
};

/**
 * 各类弹窗设计
 *
 * 业务中不直接使用原生的弹窗，统一使用 Layers 操作，方便统一风格
 * ========================================================================
 */
export default {
    // some useful message-box
    succeed, msg, info, warn, error, failed, loading

    // countdown - loader
    , startLoading, closeLoading, pedometer

    // alert
    , alert, prompt, confirm, alertHtml
}